const {CSSTransition, TransitionGroup} = ReactTransitionGroup

class Item extends React.Component {
  constructor(props) {
    super(props)
    this.modify = this.modify.bind(this)
    this.remove = this.remove.bind(this)
  }

  modify() {
    const {id, value} = this.props
    this.props.onModify(id, value)
  }

  remove() {
    this.props.onRemove(this.props.id)
  }

  render() {
    return <li className="list-group-item">
      {this.props.value}
      &nbsp;
      <button onClick={this.modify} className="right btn btn-primary btn-sm">
        <i className="glyphicon glyphicon-pencil"></i>
      </button> &nbsp;
      <button onClick={this.remove} className="right btn btn-danger btn-sm">
        <i className="glyphicon glyphicon-remove"></i>
      </button>
    </li>
  }
}

class ItemEditor extends React.Component {
  static defaultProps = {
    value: 'default' // 这个是会被传进来的值覆盖掉
  }
  constructor(props) {
    super(props)
    this.state = {
      value: this.props.value
    }
    this.save = this.save.bind(this)
    this.remove = this.remove.bind(this)
    this.changeHandle = this.changeHandle.bind(this)
  }

  changeHandle(evt) {
    this.setState({
      value: evt.target.value
    })
    // setState 相当于调用了下面的两段代码
    // this.state.value = evt.target.value
    // this.forceUpdate()
  }

  save() {
    this.props.onSave(this.props.id, this.state.value)
  }

  remove() {
    this.props.onRemove(this.props.id)
  }

  render() {
    const {value} = this.state
    return <li className="list-group-item">
      <input type="text" onChange={this.changeHandle} defaultValue={value} className="item-eidt"/>
      &nbsp;
      <button onClick={this.save} className="right btn btn-primary btn-sm">
        <i className="glyphicon glyphicon-ok"></i>
      </button> &nbsp;
      <button onClick={this.remove} className="right btn btn-danger btn-sm">
        <i className="glyphicon glyphicon-remove"></i>
      </button>
    </li>
  }
}
// ItemEditor.defaultProps = {
//   value: 'default'
// }
ItemEditor.propTypes = {
  // value: String
}

class List extends React.Component {
  constructor() {
    super()
    this.state = {
      id: 0,
      list: new Map(),
      editList: new Map(),
      testInput: ''
    }
    this.save = this.save.bind(this)
    this.add = this.add.bind(this)
    this.modify = this.modify.bind(this)
    this.removeItem = this.removeItem.bind(this)
    this.removeItemEditor = this.removeItemEditor.bind(this)
  }

  add() {
    this.state.editList.set(++this.state.id, '')
    this.forceUpdate()
  }

  removeItem(id) {
    this.state.list.delete(id)
    this.forceUpdate()
  }

  removeItemEditor(id) {
    this.state.editList.delete(id)
    this.forceUpdate()
  }

  save(id, value) {
    this.state.editList.delete(id)
    this.state.list.set(id, value)
    this.forceUpdate()
  }

  modify(id, value) {
    console.log(this.state, id, value)
    this.state.list.delete(id)
    this.state.editList.set(id, value)
    this.forceUpdate()
  }

  linkState(key) {
    return {
      value: this.state[key],
      requestChange(value) {
        this.setState({[key]: value})
      }
    }
  }

  render() {
    const listDom = [], editListDom = [], {list, editList} = this.state
    for (let [id, value] of list) {
      listDom.push(
        <CSSTransition key={id} timeout={500} classNames="item">
          <Item key={id} 
            id={id}
            onModify={this.modify}
            onRemove={this.removeItem} 
            value={value}
          ></Item>
        </CSSTransition>
      )
    }
    for (let [id, value] of editList) {
      editListDom.push(
        <CSSTransition key={id} timeout={500} classNames="item">
          <ItemEditor key={id} 
            id={id} 
            onRemove={this.removeItemEditor} 
            onSave={this.save}
            value={value}
          ></ItemEditor>
        </CSSTransition>
      )
    }
    return <div>
      {
        React.createElement('div', {
          style: {
            color: 'blue'
          },
          className: 'btn btn-success btn-sm'
        }, 'jsx test')
      }
      <button type="button" className="btn btn-primary" onClick={this.add}>添加</button>
      <ul className="list-group">
        <TransitionGroup>
          {
            listDom
          }
        </TransitionGroup>
        <TransitionGroup>
          {
            editListDom
          }
        </TransitionGroup>
      </ul>
      {/* <p>{this.state.testInput}</p>
      <input type="text" valuelink={this.linkState('testInput')}/> */}
    </div>
  }
}

ReactDOM.render(<List/>, document.querySelector('#app'))